<template>
  <!-- 需求单 -->
  <div>
    <!-- 第一行 -->
    <el-row>
      <el-col span="2.5">
        <el-button icon="el-icon-menu">
          黄金品类
        </el-button>
      </el-col>
      <el-col span="2.5">
        <el-button icon="el-icon-plus">
          <router-link to="/menu/add_rk"
                       tag="span">
            新增入库
          </router-link>
        </el-button>
      </el-col>
      <el-col span="2.5">
        <el-button icon="el-icon-printer">
          导出
        </el-button>
      </el-col>
      <el-col span="6">
        <el-date-picker v-model="date"
                        @blur="searchDate"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="timestamp"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-col>
      <el-col span="1">
        <div> &nbsp;</div>
      </el-col>
      <el-col span="4">
        <el-input v-model="input"
                  placeholder="请输入内容"></el-input>
      </el-col>
      <el-col span="2">
        <el-button type="primary"
                   @click="search"
                   icon="el-icon-search">搜索</el-button>

      </el-col>
      <el-col span="3">
        <el-button circle="true"
                   icon="el-icon-delete-solid"></el-button>
        <el-button circle="true"
                   icon="el-icon-refresh"></el-button>

      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column prop="date"
                       label="单号"
                       width="180">
      </el-table-column>
      <el-table-column prop="date"
                       label="序号"
                       width="180">
      </el-table-column>
      <el-table-column prop="date"
                       label="客户"
                       width="180">
      </el-table-column>
      <el-table-column prop="date"
                       label="部门"
                       width="180">
      </el-table-column>
      <el-table-column prop="date"
                       label="重量"
                       width="180">
      </el-table-column>
      <el-table-column prop="date"
                       label="数量"
                       width="180">
      </el-table-column>
      <el-table-column prop="date"
                       label="来货重量"
                       width="180">
      </el-table-column>
      <el-table-column prop="name"
                       label="来货数量"
                       width="180">
      </el-table-column>
      <el-table-column prop="address"
                       label="制单人">
      </el-table-column>
            <el-table-column prop="date"
                       label="日期"
                       width="180">
      </el-table-column>
            <el-table-column prop="date"
                       label="日期"
                       width="180">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="1"
                   :page-sizes="[10, 20, 30]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="80">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      date: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    }
  },
  methods: {
    search() {
      //按输入入库编号查
      //alert(this.date);
    },
    searchDate() {
      //按时间查询
      alert(this.date)
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
  created() {
    this.axios({
      method: 'get',
      url: this.baseUrl + 'RkTable/selectByPage',
      params: {
        page: 1,
        nums: 10,
      },
    }).then((res) => {
      console.log(res)
    })
  },
}
</script>

<style scoped>
</style>